const PropTypes = require('prop-types');
const React = require('react');
const {
  View,
  StyleSheet,
  ViewPropTypes
} = require('react-native');
const {
  JDDevice,
  JDTouchable,
  JDImage,
  JDTextInput,
} = require('@areslabs/jdreact-core-lib');
const styleUtil = require('@areslabs/jdreact-core-lib/Libraries/Utilities/styleUtil');

class JDSearchInput extends React.Component {
  static propTypes = {
    ...JDTextInput.props,
    style: ViewPropTypes.style,
    inputStyle: JDTextInput.propTypes.style,
  };

  render() {
    return (
      <View style={styleUtil.concatStyle(styles.searchInput, this.props.style)}>
        <View style={[styles.floatIcon, styles.searchIcon]}>
          <JDImage
            source={require('./images/search_icon_search.png')}
            style={styles.iconSearch} />
        </View>
        <JDTextInput
          placeholderTextColor="#939393"
          {...this.props}
          style={styleUtil.concatStyle(styles.textInput, this.props.inputStyle)}
          onChangeText={this._onChangeText}
          ref={v => { this.textInput = v; }}
          returnKeyType="search"
          returnKeyLabel="search"
        />
        <JDTouchable
          style={[styles.floatIcon, styles.clearIcon, this.state.showClearIcon ? null : {opacity: 0}]}
          onPress={this._clear}>
          <JDImage
            source={require('./images/search_icon_clear.png')}
            style={styles.icon} />
        </JDTouchable>
      </View>
    )
  }

  _onChangeText = (text) => {
    const shouldShowClearIcon = !this._isEmpty(text);
    if (shouldShowClearIcon !== this.state.showClearIcon) {
      this.setState({
        showClearIcon: shouldShowClearIcon,
      });
    }
    this.props.onChangeText && this.props.onChangeText(text);
  };

  _isEmpty = (value) => {
    if (typeof value === 'undefined' || value === null) {
      return true;
    }
    return String(value).length <= 0;
  };

  _clear = () => {
    this.textInput.clear();
  };

  getTextInputRef = () => {
    return this.textInput;
  };

  state = {
    showClearIcon: !this._isEmpty(this.props.value)
  };
}

const styles = StyleSheet.create({
  searchInput: {
    flexDirection: 'row',
    height: JDDevice.getRpx(60),
    width: JDDevice.getRpx(400),
    borderRadius:JDDevice.getDpx(8),
    paddingHorizontal: JDDevice.getRpx(60),
    backgroundColor: '#F0F2F5',
  },
  textInput: {
    flex:1,
    alignSelf: 'center',
    backgroundColor: '#F0F2F5',
    padding:0,
    fontSize: JDDevice.getFontSize(28),
    borderWidth: 0,
    color:'#232326',
  },
  floatIcon: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  searchIcon: {
    left: 0,
    width: JDDevice.getRpx(60),
  },
  clearIcon: {
    right: 0,
    width: JDDevice.getRpx(60),
  },
  icon: {
    width: JDDevice.getRpx(30),
    height: JDDevice.getRpx(30),
    resizeMode: 'contain'
  },
  iconSearch:{
    width: JDDevice.getRpx(28),
    height: JDDevice.getRpx(27),
    resizeMode: 'contain'
  }
});

module.exports = JDSearchInput;
